<template>
    <div class="large-screen">
        <!-- 顶部标题 -->
        <div class="top">
            <!-- <img src="../../../assets/images/login/logo.png" alt="" style="width: 100px" /> -->
            <img src="@/assets/images/logo.png" alt="" style="width: 40px; margin-left: 10px" />
            <span class="system-title">综合能源计量与预付费系统</span>

            <div class="full-screen-btn-con">
                <Tooltip content="监控中心" placement="left">
                    <div class="set" @click="showCenter">
                        <Icon :type="'md-home'" :size="23"></Icon>
                    </div>
                </Tooltip>
            </div>
        </div>
        <!-- 内容 -->
        <div class="large-content">
            <!-- 内容上部 -->
            <div class="content-top-box">
                <!-- 内容-左边 -->
                <div class="content-top-left-box">
                    <div class="left-box">
                        <myCard myTitle="总览" className="1" :height="'68px'">
                            <div class="overview-box">
                                <div class="overview-item" v-for="item in overviewList" :key="item.key">
                                    <span class="number">{{ item.value }}</span>
                                    <span>{{ item.title }}</span>
                                </div>
                            </div>
                        </myCard>
                        <div class="left-bottom-box">
                            <myCard myTitle="电能耗统计分析" className="1" :custom-style="{flex: 1}" :showBtnGroup="true">
                                <BtnGroup :btnGroup="btnGroup" activeNow="total" />
                                <ElectricityEcharts />
                            </myCard>

                            <myCard myTitle="水能耗统计分析" className="1" :custom-style="{flex: 1}" :showBtnGroup="true">
                                <BtnGroup :btnGroup="btnGroup" activeNow="total" />
                                <WaterEcharts />
                            </myCard>
                        </div>
                    </div>
                </div>
                <!-- 内容-中部 -->
                <div class="content-top-center-box">
                    <div class="content-top-center-box-top">
                        <div
                            class="center-item"
                            v-for="item in centerViewList"
                            :key="item.key"
                            :style="{backgroundImage: `url(${require(`@/assets/images/index/largeScreen/${item.backgroundColor}`)})`}"
                        >
                            <span class="center-item-title">{{ item.title }}</span>
                            <div class="center-Number">
                                <span class="center-number">{{ item.value }}</span>
                                <span class="center-unit">{{ item.unit }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-top-center-box-bottom">
                        <Earth3D />
                    </div>
                </div>
                <!-- 内容-右边 -->
                <div class="content-top-right-box">
                    <myCard myTitle="建筑能耗排名" className="1" :height="'68px'">
                        <buildingEcharts />
                    </myCard>
                    <myCard myTitle="支付营收比" className="1" :height="'68px'" :showBtnGroup="true" :showDate="true">
                        <RevenueEcharts />
                    </myCard>
                    <myCard myTitle="预警告警信息" className="1" :height="'68px'" :contentStyle="{padding: '2px'}">
                        <warningInfo />
                    </myCard>
                </div>
            </div>
            <!-- 内容底排 -->
            <div class="content-bottom-box">
                <bottomCard title="电能总营收(元)" />
                <bottomCard title="水能总营收(元)" />
                <bottomCard title="电能耗情况(kwh)" :type="false" />
                <bottomCard title="水能耗情况(m³)" :type="false" />
            </div>
        </div>
    </div>
</template>
<script>
import bottomCard from './components/bottomCard'
import BtnGroup from './components/btnGroup.vue'
import buildingEcharts from './components/buildingEcharts.vue'
import Earth3D from './components/Earth3D.vue'
import ElectricityEcharts from './components/electricityEcharts'
import myCard from './components/myCard'
import RevenueEcharts from './components/RevenueEcharts.vue'
import warningInfo from './components/warningInfo.vue'
import WaterEcharts from './components/waterEcharts'
export default {
    name: 'largeScreen',
    components: {
        myCard,
        bottomCard,
        ElectricityEcharts,
        WaterEcharts,
        BtnGroup,
        buildingEcharts,
        RevenueEcharts,
        warningInfo,
        Earth3D
    },
    computed: {
        imageUrl(imagePath) {
            return require(`@/assets/images/index/largeScreen/${imagePath}`)
        }
    },
    data() {
        return {
            bgImageUrl: require('@/assets/images/index/largeScreen/unit.jpg'),
            overviewList: [
                {
                    title: '总核栋数(栋)',
                    key: 'key1',
                    value: '738'
                },
                {
                    title: '总设备数(台)',
                    key: 'key2',
                    value: '2000'
                },
                {
                    title: '总用能人数(个)',
                    key: 'key3',
                    value: '2200'
                },
                {
                    title: '总旋耗(准煤/吨)',
                    key: 'key4',
                    value: '28000'
                }
            ],
            centerViewList: [
                {
                    title: '单位面积能耗',
                    key: 'key1',
                    value: '3242',
                    unit: 'kg/m2',
                    backgroundColor: 'unit.jpg'
                    // backgroundColor: require("@/assets/images/index/largeScreen/unit.jpg"),
                },
                {
                    title: '人均能耗',
                    key: 'key2',
                    value: '3242',
                    unit: '准煤/人',
                    backgroundColor: 'people.jpg'
                    // backgroundColor: require("@/assets/images/index/largeScreen/people.jpg"),
                    // backgroundColor: "@/assets/images/index/largeScreen/people.jpg",
                },
                {
                    title: '碳排放量',
                    key: 'key3',
                    value: '3242',
                    unit: 'tC02e',
                    backgroundColor: 'carbon.jpg'
                    // backgroundColor: require("@/assets/images/index/largeScreen/carbon.jpg")
                    // backgroundColor: "@/assets/images/index/largeScreen/carbon.jpg",
                }
            ],
            btnGroup: [
                {
                    label: '按总量统计',
                    id: 'total'
                },
                {
                    label: '按金额统计',
                    id: 'money'
                }
            ]
            // overviewData: [
            //   {
            //     title: "总核栋数(栋)",
            //     key: "key1",
            //     value: "100",
            //     unit: "个",
            //   },
            //   {
            //     title: "总核栋数(栋)",
            //     key: "key2",
            //     value: "100",
            //     unit: "个",
            //   },
            //   {
            //     title: "总核栋数(栋)",
            //   }
            // ]
        }
    },
    mounted() {},
    methods: {
        showCenter() {
            this.$router.push({
                name: 'mcMainIndex'
            })
        }
    }
}
</script>
<style lang="scss">
.large-screen {
    height: 100%;
    width: 100%;
    background-image: url('../../../assets/images/index/largeScreen/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 14px;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
        display: none;
    }
    .top {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        background-image: url('../../../assets/images/index/largeScreen/top.png');
        background-size: 100% 100%;
        padding-left: 20px;
        .system-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 30px;
        }

        .full-screen-btn-con {
            position: absolute;
            right: 20px;
        }
    }
    .large-content {
        // height: calc(100% - 60px);
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        .content-top-box {
            height: calc(100% - 202px);
            display: flex;
            justify-content: space-between;
            .content-top-left-box {
                .left-box {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    height: 100%;
                    .left-bottom-box {
                        height: calc(100% - 119px);
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                    }
                    .overview-box {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        width: 100%;
                        .overview-item {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 5px;
                            font-size: 14px;
                            color: #cdced8;
                            .number {
                                font-size: 25px;
                                font-weight: 700;
                                color: #07d3eb;
                            }
                        }
                    }
                }
            }
            gap: 10px;

            .content-top-left-box,
            .content-top-right-box {
                width: 30%;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .content-top-center-box {
                box-sizing: border-box;
                .content-top-center-box-top {
                    display: flex;
                    justify-content: space-between;
                    gap: 10px;
                    height: 114px;
                    .center-item {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        gap: 4px;
                        border-radius: 10px;
                        flex: 1;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        padding: 20px;
                        .center-item-title {
                            font-size: 15px;
                            font-weight: 600;
                        }
                        .center-Number {
                            display: flex;
                            align-items: baseline;
                            width: 100%;
                            gap: 13px;
                            .center-number {
                                font-size: 36px;
                            }
                            .center-unit {
                                font-size: 14px;
                                color: #fff;
                            }
                        }
                    }
                }
                .content-top-center-box-bottom {
                    height: calc(100% - 104px);
                    // margin-top: 13px;
                }
                width: 39%;
            }
        }
        .content-bottom-box {
            display: flex;
            justify-content: space-between;
            gap: 5px;
            width: 100%;
            margin-top: 10px;
        }
    }

    .el-input__inner {
        background-color: transparent;
        color: #fff;
    }
}
</style>
